<template>
  <div class="panel-main">
    <div class="top">
      <div class="top-left">
        <slot name="title">
          <div v-if="title" class="vertical"></div>
          <div class="title">{{ title }}</div>
        </slot>
      </div>
      <div class="top-right">
        <slot name="icon"></slot>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <slot name="left"></slot>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "panelMain",
  props: ["title"],
};
</script>
<style lang="scss" scoped>
.panel-main {
  background-color: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    background-color: $color-main-primary;
    height: 30px;
    display: flex;
    color: #ffffff;
    .top-left{
      height: 30px;
      display: flex;
      align-items: center;
      flex: 1;
    }
    .top-right{
      height: 30px;
      display: flex;
      align-items: center;
      padding-right: 10px;
    }
    .title {
      padding-left: 15px;
    }
    .vertical {
      width: 1px;
      height: 15px;
      border-left: 1px solid #ffffff;
      margin-left: 15px;
    }
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .main{
    flex: 1;
    display: flex;
    overflow: hidden;
  }
}
.panel-main + .panel-main {
  margin-left: 0;
}
</style>
